<script setup>
import { useDisplay } from "vuetify";
import { subjectData } from '@/stores/homeData.js'
import SecondPage from "@/views/home/SecondPage.vue";
import ThirdPage from "@/views/home/ThirdPage.vue"
import FourthPage from "@/views/home/FourthPage.vue";
import FifthPage from "@/views/home/FifthPage.vue";

import 'animate.css';

const { mdAndUp } = useDisplay()
const { mobile } = useDisplay()
const letters = ['南', '苑', '文', '传', '课', '堂'];
const subjectElement = ref(null); // 用于在模板中引用.subject元素
const secondePage = ref(null)
const showVideo = ref(false)
const showVideoTemplate = () => {
  showVideo.value = !showVideo.value
}


onMounted(() => {

  window.scrollTo(0, 0);
})

</script>

<template>
  <!------------------------------------- 首屏 ------------------------------------------>
  <v-container fluid class="body" id="homePage">
    <v-row class="d-flex flex-row ">
      <v-col :cols="7" class="d-flex flex-row">
        <div class="leftGrid animate__animated animate__backInLeft  animate__fast">
          <div class="tilte">
            <span v-for="(letter, index) in letters" :key="index" :style="{ animationDelay: `${(index) * 0.3}s` }">
              {{ letter }}
            </span>
          </div>
          <div class="introduce">一个专为广州南方学院文学与传媒学院学子提供在线学习资源的网站</div>
          <div class="btnGroup">
            <div>往下翻翻</div>
            <div @click="showVideoTemplate">看看文传</div>
          </div>
        </div>
      </v-col>
      <v-col :cols="5" class="Logo">
        <v-img class="animate__animated animate__zoomInDown" width="300" height="300"
          src="https://kanekikeh.online/wclogo.png"></v-img>
      </v-col>
    </v-row>
    <div class="subject" ref="subjectElement">
      <template v-for="item in subjectData" :key="item">
        <div class="item animate__animated animate__fadeInUp">
          <div class="headLogo">
            <img :src="item.image" alt="">
          </div>
          <div class="name">{{ item.subject }}</div>
          <div class="text">{{ item.introudce }}</div>
        </div>
      </template>
    </div>

    <v-overlay v-model="showVideo" persistent
      :class="['overLay', 'animate__animated', showVideo ? 'animate__zoomIn' : 'animate__zoomOut']">
      <video controls autoplay>
        <source src="https://kanekikeh.online/zoujinwenchuan/wenchuan" type="video/mp4">
      </video>
      <img class="closeImg" src="/src/assets/images/close.png" @click="showVideoTemplate" />
    </v-overlay>
  </v-container>


  <SecondPage />
  <ThirdPage />
  <FourthPage />
  <FifthPage />
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  width: 100%;
  height: 100vh;
  position: relative;

}

.Logo {
  & .v-img {
    border-radius: 100%;
    box-shadow: -20px -20px 100px 30px rgba(95, 211, 140, 0.5), 20px 20px 100px 30px rgba(65, 166, 243, 0.5);
    // margin-top: 20vh;
    margin: auto;
    margin-top: 15vh;
  }
}

.leftGrid {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  width: 100%;
  // height: 100vh;
  padding: 20vh 0 0 5vw;
}

span {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 3rem;
  color: #3c3c43;
  animation: spread 1s ease-in-out infinite alternate;
}

@keyframes spread {
  to {
    color: rgba(65, 166, 243, 1);
    text-shadow: 1px 0 100px rgba(65, 166, 243, 1);
  }
}

.introduce {
  color: #67676c;
  font-size: 1.3rem;
  margin-top: 2vh;
}

.btnGroup {
  display: flex;
  flex-direction: row;
  font-size: 0.9rem;
  margin-top: 5vh;

  & div:nth-child(1) {
    background-color: rgba(65, 166, 243, 1);
    padding: 0.8rem 1.5rem 0.8rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: white;
    font-weight: bold;
    margin-right: 1vw;
    cursor: pointer;

  }

  & div:nth-child(2) {
    background-color: #e4e4e9;
    padding: 0.8rem 1.5rem 0.8rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: #3c3c43;
    font-weight: bold;
    cursor: pointer;

  }
}

.subject {
  width: 100%;
  position: absolute;
  bottom: -10%;
  left: 0%;
  padding-left: 2vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.item {
  width: 30vw;
  height: 35vh;
  background-color: #f6f6f7;
  border-radius: 10px;
  margin-right: 2vw;
  position: relative;
}

.headLogo {
  position: absolute;
  width: 5vw;
  height: 5vw;
  background-color: #e7e8ec;
  border-radius: 15px;
  top: 12%;
  left: 8%;
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    width: 120%;
    height: 120%;
  }
}

.name {
  position: absolute;
  top: 50%;
  left: 8%;
  color: #3c3c43;
  font-weight: bold;
  font-size: 1.1rem;
}

.text {
  position: absolute;
  top: 68%;
  left: 8%;
  right: 8%;
  font-size: 0.8rem;
  font-weight: bold;
  color: #65656a;
  text-align: justify;
}

.overLay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.closeImg {
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  top: 3%;
  left: 99%;
  cursor: pointer;
  transition: .5s;

  &:hover {
    transform: rotate(405deg);
  }
}

video {
  width: 90vw;
  height: 100vh;
}
</style>
